<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Investment Calculator</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link href="./static/bootstrap-5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="./static/bootstrap-5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="./static/echarts/echarts.min.js"></script>
</head>
<style>
    label {
        margin-top: 6px;
    }
    .row {
        margin-top: 10px;
    }
</style>
<body id="body">
    <div class="container text-center">
        <div class="row">
            <div class="col-7">
                <p>资产计算器，分为固收部分和非固收部分，支持QQQ、QLD、TQQQ，蓝色部分为可编辑部分</p>
            </div>
        </div>
        <div class="row">
            <div class="col-7">
                <div class="row">
                    <div class="col-2">
                        <label for="totalAmount" class="form-label"><strong>总资产</strong></label>
                    </div>
                    <div class="col-3">
                        <input type="number" class="form-control" style="background-color: #f0f8ff" id="totalAmount" placeholder="" v-model="totalAmount" @change="changeAsset('totalAmount')">
                    </div>
                </div>
                <div class="row">
                    <div class="col-2">
                        <label for="startDate" class="form-label">开始日期</label>
                    </div>
                    <div class="col-3">
                        <input type="text" class="form-control" style="background-color: #f0f8ff" id="startDate" placeholder="yyyy-mm-dd" v-model="startDate" @change="calculate">
                    </div>
                    <div class="col-2">
                        <label for="endDate" class="form-label">结束日期</label>
                    </div>
                    <div class="col-3">
                        <input type="text" class="form-control" style="background-color: #f0f8ff" id="endDate" placeholder="yyyy-mm-dd" v-model="endDate" @change="calculate">
                    </div>
                </div>
                <div class="row">
                    <div class="col-2">
                        <label for="fixTotalProfit" class="form-label">期末资产</label>
                    </div>
                    <div class="col-3">
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" id="totalProfit" placeholder="" v-model="totalProfit" readonly>
                            <!--                    <span class="input-group-text">%</span>-->
                        </div>
                    </div>
                    <div class="col-2">
                        <label for="fixTotalProfit" class="form-label">总投入</label>
                    </div>
                    <div class="col-3">
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" id="totalInvest" placeholder="" v-model="totalInvest" readonly>
                            <!--                    <span class="input-group-text">%</span>-->
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-5">
                <div id="chartTotal" style="width: 100%;height: 300px;"></div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-1">
                <label><strong>固收部分</strong></label>
            </div>
        </div>
        <div class="row">
            <div class="col-7">
                <div class="row">
                    <div class="col-2">
                        <label for="fixPercent" class="form-label">占比</label>
                    </div>
                    <div class="col-3">
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" style="background-color: #f0f8ff" id="fixPercent" placeholder="" v-model="fix.percent" @change="changeAsset('fixPercent')">
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                    <div class="col-2">
                        <label for="fixPercent" class="form-label">金额</label>
                    </div>
                    <div class="col-3">
                        <input type="number" class="form-control" style="background-color: #f0f8ff"  id="fixAmount" placeholder="" v-model="fix.amount" @change="changeAsset('fixAmount')">
                    </div>
                </div>
                <div class="row">
                    <div class="col-2">
                        <label for="fixStock" class="form-label">标的</label>
                    </div>
                    <div class="col-3">
                        <div class="input-group">
                            <select class="form-select" style="background-color: #f0f8ff" id="fixStock" v-model="fix.stock" @change="calculate">
                                <option value="QQQ">QQQ</option>
                                <option value="QLD">QLD</option>
                                <option value="TQQQ">TQQQ</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-2">
                        <label for="fixAnnualInvest" class="form-label">每年定投</label>
                    </div>
                    <div class="col-3">
                        <input type="number" class="form-control" style="background-color: #f0f8ff" id="fixAnnualInvest" placeholder="" v-model="fix.annualInvest" @change="calculate">
                    </div>
                </div>
                <div class="row">
                    <div class="col-2">
                        <label>收益</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-2">
                        <label for="fixTotalProfit" class="form-label">总收益</label>
                    </div>
                    <div class="col-3">
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" id="fixTotalProfit" placeholder="" v-model="fix.totalProfit" readonly>
                            <!--                    <span class="input-group-text">%</span>-->
                        </div>
                    </div>
                    <div class="col-2">
                        <label for="fixTotalProfit" class="form-label">总投入</label>
                    </div>
                    <div class="col-3">
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" id="fixTotalInvest" placeholder="" v-model="fix.totalInvest" readonly>
                            <!--                    <span class="input-group-text">%</span>-->
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-2">
                        <label for="fixTotalProfitPercentage" class="form-label">总收益率</label>
                    </div>
                    <div class="col-3">
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" id="fixTotalProfitPercentage" placeholder="" v-model="fix.totalProfitPercentage" readonly>
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                    <div class="col-2">
                        <label for="fixAvgYearPercentage" class="form-label">年化收益率</label>
                    </div>
                    <div class="col-3">
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" id="fixAvgYearPercentage" placeholder="" v-model="fix.avgYearPercentage" readonly>
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-5">
                <div id="chartFix" style="width: 100%;height: 300px;"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-2">
                <button type="button" class="btn btn-outline-primary" @click="fix.showDetail=!fix.showDetail">详细（点击展开）</button>
            </div>
        </div>
        <div class="row" v-if="fix.showDetail">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th scope="col">年份</th>
                    <th scope="col">涨跌</th>
                    <th scope="col">市值</th>
                    <th scope="col">定投额</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="annualReturn in fix.annualReturnList" :class="annualReturn.pal>0?'table-success':'table-danger'">
                    <th scope="row">{{annualReturn.year+'年'}}</th>
                    <td>{{annualReturn.pal+'%'}}</td>
                    <td>{{annualReturn.balance}}</td>
                    <td>{{annualReturn.investAmount}}</td>
                </tr>
                </tbody>
            </table>
        </div>

        <hr>
        <div class="row">
            <div class="col-1">
                <label><strong>浮动部分</strong></label>
            </div>
        </div>
        <div class="row">
            <div class="col-7">
                <div class="row">
                    <div class="col-2">
                        <label for="floatPercent" class="form-label">占比</label>
                    </div>
                    <div class="col-3">
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" style="background-color: #f0f8ff" id="floatPercent" placeholder="" v-model="float.percent" @change="changeAsset('floatPercent')">
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                    <div class="col-2">
                        <label for="floatAmount" class="form-label">金额</label>
                    </div>
                    <div class="col-3">
                        <input type="number" class="form-control" style="background-color: #f0f8ff" id="floatAmount" placeholder="" v-model="float.amount" @change="changeAsset('floatAmount')">
                    </div>
                </div>
                <div class="row">
                    <div class="col-2">
                        <label for="cashPercent" class="form-label">现金占比</label>
                    </div>
                    <div class="col-3">
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" id="cashPercent" placeholder="" v-model="float.cashPercent">
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                    <div class="col-2">
                        <label for="cash" class="form-label">金额</label>
                    </div>
                    <div class="col-3">
                        <input type="number" class="form-control" id="cash" placeholder="" v-model="float.cash">
                    </div>
                </div>
                <div class="row">
                    <div class="col-2">
                        <label for="floatStock" class="form-label">标的</label>
                    </div>
                    <div class="col-3">
                        <div class="input-group">
                            <select class="form-select" style="background-color: #f0f8ff" id="floatStock" v-model="float.stock" @change="calculate">
                                <option value="QQQ">QQQ</option>
                                <option value="QLD">QLD</option>
                                <option value="TQQQ">TQQQ</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-2">
                        <label for="floatAnnualInvest" class="form-label">每年定投</label>
                    </div>
                    <div class="col-3">
                        <input type="number" class="form-control" style="background-color: #f0f8ff" id="floatAnnualInvest" placeholder="" v-model="float.annualInvest" @change="calculate">
                    </div>
                </div>
                <div class="row">
                    <div class="col-2">
                        <label class="form-label">聪明再平衡</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-2">
                        <label for="withdrawPercentage" class="form-label">上涨取出</label>
                    </div>
                    <div class="col-3">
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" style="background-color: #f0f8ff" id="withdrawPercentage" placeholder="" v-model="float.withdrawPercentage" @change="calculate">
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                    <div class="col-2">
                        <label for="investPercentage" class="form-label">下跌投入</label>
                    </div>
                    <div class="col-3">
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" style="background-color: #f0f8ff" id="investPercentage" placeholder="" v-model="float.investPercentage" @change="calculate">
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-2">
                        <label>收益</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-2">
                        <label for="floatTotalProfit" class="form-label">总收益</label>
                    </div>
                    <div class="col-3">
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" id="floatTotalProfit" placeholder="" v-model="float.totalProfit" readonly>
                            <!--                    <span class="input-group-text">%</span>-->
                        </div>
                    </div>
                    <div class="col-2">
                        <label for="floatTotalProfit" class="form-label">总投入</label>
                    </div>
                    <div class="col-3">
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" id="floatTotalInvest" placeholder="" v-model="float.totalInvest" readonly>
                            <!--                    <span class="input-group-text">%</span>-->
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-2">
                        <label for="floatTotalProfitPercentage" class="form-label">总收益率</label>
                    </div>
                    <div class="col-3">
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" id="floatTotalProfitPercentage" placeholder="" v-model="float.totalProfitPercentage" readonly>
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                    <div class="col-2">
                        <label for="floatAvgYearPercentage" class="form-label">年化收益率</label>
                    </div>
                    <div class="col-3">
                        <div class="input-group mb-3">
                            <input type="number" class="form-control" id="floatAvgYearPercentage" placeholder="" v-model="float.avgYearPercentage" readonly>
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-5">
                <div id="chartFloat" style="width: 100%;height: 300px;"></div>
            </div>
        </div>

        <div class="row">
            <div class="col-2">
                <button type="button" class="btn btn-outline-primary" @click="float.showDetail=!float.showDetail">详细（点击展开）</button>
            </div>
        </div>
        <div class="row" v-if="float.showDetail">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th scope="col">年份</th>
                    <th scope="col">涨跌</th>
                    <th scope="col">市值</th>
                    <th scope="col">现金</th>
                    <th scope="col">定投额</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="annualReturn in float.annualReturnList" :class="annualReturn.pal>0?'table-success':'table-danger'">
                    <th scope="row">{{annualReturn.year+'年'}}</th>
                    <td>{{annualReturn.pal+'%'}}</td>
                    <td>{{annualReturn.balance}}</td>
                    <td>{{annualReturn.cash}}</td>
                    <td>{{annualReturn.investAmount}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="row" style="margin-bottom: 50px">
        </div>
    </div>
</body>
</html>
<script>
    const { createApp } = Vue

    createApp({
        data() {
            return {
                totalAmount: 700000,
                totalProfit: 0,
                totalInvest: 0,
                startDate: '2020-01-01',
                endDate: getToday(),
                fix: {
                    percent: 60,
                    amount: 420000,
                    stock: 'QQQ',
                    annualInvest: 40000,
                    totalProfit: 0,
                    totalProfitPercentage: 0,
                    avgYearPercentage: 0,
                    annualReturnList: [],
                    showDetail: false,
                    totalInvest: 0,
                },
                float: {
                    percent: 20,
                    amount: 140000,
                    cashPercent: 20,
                    cash: 140000,
                    stock: 'QLD',
                    annualInvest: 20000,
                    totalProfit: 0,
                    totalProfitPercentage: 0,
                    avgYearPercentage: 0,
                    annualReturnList: [],
                    withdrawPercentage: 30,
                    investPercentage: 5,
                    showDetail: false,
                    totalInvest: 0,
                },

            }
        },
        created(){
            this.calculate()
        },
        methods: {
            calculateFixed() {
                return new Promise((resolve, reject) => {
                    let params = new URLSearchParams()
                    params.append('amount', this.fix.amount)
                    params.append('investAmount', this.fix.annualInvest)
                    params.append('code', this.fix.stock)
                    params.append('startDate', this.startDate)
                    params.append('endDate', this.endDate)
                    let that = this;
                    axios({
                        method: 'post',
                        url: '/stock/calculateFixed',
                        data: params,
                    })
                    .then(function (response) {
                        if (response.status === 200) {
                            that.fix.totalProfit = parseFloat(response.data.totalAmount).toFixed(2)
                            that.fix.totalInvest = parseFloat(response.data.totalInvest).toFixed(2)
                            that.fix.totalProfitPercentage = parseFloat(response.data.totalProfitPercentage).toFixed(2)
                            that.fix.avgYearPercentage = parseFloat(response.data.avgYearPercentage).toFixed(2)
                            that.fix.annualReturnList = response.data.annualReturnList
                            that.fix.annualReturnList.forEach((item, index) => {
                                item.pal = parseFloat(item.pal).toFixed(2)
                                item.balance = parseFloat(item.balance).toFixed(2)
                                item.investAmount = parseFloat(item.investAmount).toFixed(2)
                            })
                            that.makeFixChart()
                            resolve()
                        } else {
                            reject()
                        }
                    });
                })

            },
            calculateFloat() {
                return new Promise((resolve, reject) => {
                    let params = new URLSearchParams()
                    params.append('amount', this.float.amount)
                    params.append('withdrawPercentage', this.float.withdrawPercentage)
                    params.append('cash', this.float.cash)
                    params.append('investPercentage', this.float.investPercentage)
                    params.append('investAmount', this.float.annualInvest)
                    params.append('code', this.float.stock)
                    params.append('startDate', this.startDate)
                    params.append('endDate', this.endDate)
                    let that = this;
                    axios({
                        method: 'post',
                        url: '/stock/calculateFloat',
                        data: params,
                    })
                    .then(function (response) {
                        if (response.status === 200) {
                            that.float.totalProfit = parseFloat(response.data.totalAmount).toFixed(2)
                            that.float.totalInvest = parseFloat(response.data.totalInvest).toFixed(2)
                            that.float.totalProfitPercentage = parseFloat(response.data.totalProfitPercentage).toFixed(2)
                            that.float.avgYearPercentage = parseFloat(response.data.avgYearPercentage).toFixed(2)
                            that.float.annualReturnList = response.data.annualReturnList
                            that.float.annualReturnList.forEach((item, index) => {
                                item.pal = parseFloat(item.pal).toFixed(2)
                                item.balance = parseFloat(item.balance).toFixed(2)
                                item.cash = parseFloat(item.cash).toFixed(2)
                                item.investAmount = parseFloat(item.investAmount).toFixed(2)
                            })
                            that.makeFloatChart()
                            resolve()
                        } else {
                            reject()
                        }
                    });
                })
            },
            calculate() {
                this.calculateFixed().then(()=>{
                    this.calculateFloat().then(()=>{
                        this.makeTotalChart()
                    })
                })
            },
            makeFixChart() {
                let annualReturnList = this.fix.annualReturnList
                let chartDom = document.getElementById('chartFix');
                let myChart = echarts.init(chartDom);
                let option;
                let yearArr = [];
                let palArr = [];
                let balanceArr = [];
                let investArr = [];
                for (let i = 0; i < annualReturnList.length; i++) {
                    yearArr.push(annualReturnList[i].year)
                    palArr.push(annualReturnList[i].pal)
                    balanceArr.push(annualReturnList[i].balance)
                    investArr.push(annualReturnList[i].investAmount)
                }
                let legendTitle = ['盈亏比','市值','投入']
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    grid: {
                        left: 0,
                        right: '5%',
                        bottom: 0,
                        containLabel: true
                    },
                    legend: {
                        data: legendTitle
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: yearArr,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '金额',
                            // min: 0,
                            // max: 250,
                            // interval: 50,
                            // axisLabel: {
                            //     formatter: '{value} 元'
                            // }
                        },
                        {
                            type: 'value',
                            name: '盈亏比',
                            // min: 0,
                            // max: 25,
                            // interval: 5,
                            axisLabel: {
                                formatter: '{value} %'
                            },
                        }
                    ],
                    series: [
                        {
                            name: legendTitle[1],
                            type: 'bar',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + ' 元';
                                }
                            },
                            data: balanceArr
                        },
                        {
                            name: legendTitle[2],
                            type: 'bar',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + ' 元';
                                }
                            },
                            data: investArr
                        },
                        {
                            name: legendTitle[0],
                            type: 'line',
                            yAxisIndex: 1,
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + ' %';
                                }
                            },
                            data: palArr
                        }
                    ]
                };

                option && myChart.setOption(option);
            },
            makeFloatChart() {
                let annualReturnList = this.float.annualReturnList
                let chartDom = document.getElementById('chartFloat');
                let myChart = echarts.init(chartDom);
                let option;
                let yearArr = [];
                let palArr = [];
                let balanceArr = [];
                let investArr = [];
                let cashArr = [];
                for (let i = 0; i < annualReturnList.length; i++) {
                    yearArr.push(annualReturnList[i].year)
                    palArr.push(annualReturnList[i].pal)
                    balanceArr.push(annualReturnList[i].balance)
                    investArr.push(annualReturnList[i].investAmount)
                    cashArr.push(annualReturnList[i].cash)
                }
                let legendTitle = ['盈亏比','市值','现金','投入']
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    grid: {
                        left: 0,
                        right: '5%',
                        bottom: 0,
                        containLabel: true
                    },
                    legend: {
                        data: legendTitle
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: yearArr,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '金额',
                            // min: 0,
                            // max: 250,
                            // interval: 50,
                            // axisLabel: {
                            //     formatter: '{value} 元'
                            // }
                        },
                        {
                            type: 'value',
                            name: '盈亏比',
                            // min: 0,
                            // max: 25,
                            // interval: 5,
                            axisLabel: {
                                formatter: '{value} %'
                            },
                        }
                    ],
                    series: [
                        {
                            name: legendTitle[1],
                            type: 'bar',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + ' 元';
                                }
                            },
                            data: balanceArr
                        },
                        {
                            name: legendTitle[2],
                            type: 'bar',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + ' 元';
                                }
                            },
                            data: cashArr
                        },
                        {
                            name: legendTitle[3],
                            type: 'bar',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + ' 元';
                                }
                            },
                            data: investArr
                        },
                        {
                            name: legendTitle[0],
                            type: 'line',
                            yAxisIndex: 1,
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + ' %';
                                }
                            },
                            data: palArr
                        }
                    ]
                };

                option && myChart.setOption(option);
            },
            makeTotalChart() {
                let annualReturnListFix = this.fix.annualReturnList
                let annualReturnListFloat = this.float.annualReturnList
                let chartDom = document.getElementById('chartTotal');
                let myChart = echarts.init(chartDom);
                let option;
                let yearArr = [];
                let palArr = [];
                let balanceArr = [];
                let investArr = [];
                let cashArr = [];
                for (let i = 0; i < annualReturnListFix.length; i++) {
                    yearArr.push(annualReturnListFix[i].year)
                    palArr.push(((parseFloat(annualReturnListFix[i].pal)+parseFloat(annualReturnListFloat[i].pal))/2).toFixed(2))
                    balanceArr.push((parseFloat(annualReturnListFix[i].balance)+parseFloat(annualReturnListFloat[i].balance)).toFixed(2))
                    investArr.push((parseFloat(annualReturnListFix[i].investAmount)+parseFloat(annualReturnListFloat[i].investAmount)).toFixed(2))
                    cashArr.push(annualReturnListFloat[i].cash)
                }
                this.totalProfit = (parseFloat(this.fix.totalProfit) + parseFloat(this.float.totalProfit)).toFixed(2)
                this.totalInvest = parseFloat(this.fix.totalInvest) + parseFloat(this.float.totalInvest)
                let legendTitle = ['盈亏比','市值','现金','投入']
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    grid: {
                        left: 0,
                        right: '5%',
                        bottom: 0,
                        containLabel: true
                    },
                    legend: {
                        data: legendTitle
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: yearArr,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '金额',
                            // min: 0,
                            // max: 250,
                            // interval: 50,
                            // axisLabel: {
                            //     formatter: '{value} 元'
                            // }
                        },
                        {
                            type: 'value',
                            name: '盈亏比',
                            // min: 0,
                            // max: 25,
                            // interval: 5,
                            axisLabel: {
                                formatter: '{value} %'
                            },
                        }
                    ],
                    series: [
                        {
                            name: legendTitle[1],
                            type: 'bar',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + ' 元';
                                }
                            },
                            data: balanceArr
                        },
                        {
                            name: legendTitle[2],
                            type: 'bar',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + ' 元';
                                }
                            },
                            data: cashArr
                        },
                        {
                            name: legendTitle[3],
                            type: 'bar',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + ' 元';
                                }
                            },
                            data: investArr
                        },
                        {
                            name: legendTitle[0],
                            type: 'line',
                            yAxisIndex: 1,
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + ' %';
                                }
                            },
                            data: palArr
                        }
                    ]
                };

                option && myChart.setOption(option);
            },
            changeAsset(id) {
                if (id === 'totalAmount') {
                    this.fix.amount = this.totalAmount * this.fix.percent / 100
                    this.float.amount = this.totalAmount * this.float.percent / 100
                }
                else if (id === 'fixPercent') {
                    if (this.fix.percent < 0) {
                        this.fix.percent = 0
                    }
                    this.fix.amount = this.totalAmount * this.fix.percent / 100
                    this.float.amount = this.totalAmount * this.float.percent / 100
                } else if (id === 'fixAmount') {
                    if (this.fix.amount < 0) {
                        this.fix.amount = 0
                    }
                    this.fix.percent = this.fix.amount / this.totalAmount * 100
                } else if (id === 'floatPercent') {
                    if (this.float.percent < 0) {
                        this.float.percent = 0
                    }
                    this.fix.amount = this.totalAmount * this.fix.percent / 100
                    this.float.amount = this.totalAmount * this.float.percent / 100
                } else if (id === 'floatAmount') {
                    if (this.float.amount < 0) {
                        this.float.amount = 0
                    }
                    this.float.percent = this.float.amount / this.totalAmount * 100
                }
                // 计算现金
                this.float.cashPercent = 100 - this.fix.percent - this.float.percent
                if (this.float.cashPercent < 0) {
                    this.float.cashPercent = 0
                }
                this.float.cash = this.totalAmount * this.float.cashPercent / 100
                this.calculate()
            }
        }
    }).mount('#body')

    //获取当前日期函数
    function getToday() {
      let date = new Date(),
        year = date.getFullYear(), //获取完整的年份(4位)
        month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
        strDate = date.getDate() // 获取当前日(1-31)
      if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
      if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0

      return `${year}-${month}-${strDate}`
    }
</script>